<template>
  <view class="homeLayout pageBg">
    <custom-header></custom-header>
    <view
      class="homeContent"
      :style="{ 'padding-top': fillHeight ? fillHeight + 'px' : '100rpx' }"
    >
      <view class="banner">
        <swiper
          circular
          class="swiper"
          :indicator-dots="true"
          indicator-color="rgba(255,255,255,0.6)"
          :autoplay="true"
          :interval="3000"
          :duration="1000"
        >
          <swiper-item
            v-for="item in banners"
            class="swiper-item"
            :key="item._id"
          >
            <image
              :src="item.picurl"
              class="swiper-image"
              mode="aspectFill"
            ></image>
          </swiper-item>
        </swiper>
      </view>
      <view class="notice">
        <view class="left">
          <uni-icons type="sound-filled" size="28"></uni-icons>
          公告
        </view>
        <view class="center">
          <swiper
            vertical
            :autoplay="true"
            :interval="3000"
            :duration="1000"
            circular
          >
            <swiper-item v-for="item in noticeList" :key="item._id">
              <view class="notice-info">{{ item.title }}</view>
            </swiper-item>
          </swiper>
        </view>
        <view class="right">
          <uni-icons
            type="forward"
            size="28"
            color="rgb(43,183,144)"
          ></uni-icons>
        </view>
      </view>
      <view class="dailyRecommend">
        <common-title title="每日推荐">
          <template v-slot:right>
            <text :style="{ 'margin-right': '5rpx' }">{{ date }}号</text>
            <uni-icons type="calendar"></uni-icons>
          </template>
        </common-title>
        <view class="picBanner">
          <scroll-view scroll-x="true">
            <view class="dailyRecommendScroll">
              <view
                @click="goToDetail"
                class="inline-block picItem"
                :key="item._id"
                v-for="item in dailyRecommendPics"
              >
                <image class="picItemImg" mode="center" :src="item.smallPicurl">
                </image>
              </view>
            </view>
          </scroll-view>
        </view>
      </view>
      <view class="featuredSelection">
        <common-title title="专题精选">
          <template v-slot:right>
            more
            <uni-icons color="rgb(69,166,133)" type="plusempty"></uni-icons>
          </template>
        </common-title>
        <view class="theme-containers mt-4">
          <theme-item
            v-for="item in classifies"
            :key="item.id"
            :data="item"
          ></theme-item>
          <theme-item :more="true"></theme-item>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { useNavBarHeight } from "../../hooks";
import {
  getBannerService,
  getDayRecommendService,
  getSystemNoticeService,
  getAllWallpaperClassifyService,
} from "../../api";
import { onMounted, ref } from "vue";
import type { Banner } from "../../api";
const { fillHeight } = useNavBarHeight();
const date = new Date().getDate();

const noticeList = ref([]);
const dailyRecommendPics = ref([]);
const banners = ref<Banner[]>([]);
const classifies = ref([]);

onMounted(() => {
  getBannerService().then((res) => {
    banners.value = res.data;
  });

  getDayRecommendService().then((res) => {
    dailyRecommendPics.value = res.data;
  });

  getSystemNoticeService().then((res) => {
    noticeList.value = res.data;
  });

  getAllWallpaperClassifyService({ select: true }).then((res) => {
    classifies.value = res.data;
  });
});

const goToDetail = () => {
  uni.navigateTo({
    url: "/pages/preview/preview",
  });
};
</script>

<style lang="scss">
.homeLayout {
  .theme-containers {
    display: flex;
    justify-content: space-between;
    flex-shrink: 0;
    flex-wrap: wrap;
  }
  .homeContent {
    padding: 15rpx 25rpx 0 25rpx;
  }
  .notice {
    .left {
      color: $brand-theme-color;
      display: flex;
      align-items: center;
      :deep() {
        .uni-icons {
          color: $brand-theme-color !important;
        }
      }
    }

    .center {
      flex: 1;
      padding: 0 20rpx;
      height: 100%;
    }

    margin-top: 30rpx;
    display: flex;
    align-items: center;
    height: 76rpx;
    justify-content: space-between;
    width: 100%;
    padding: 0 30rpx;
    border-radius: 38rpx;
    background-color: rgb(249, 249, 249);

    swiper {
      height: 100%;

      .notice-info {
        color: rgb(101, 101, 101);
        line-height: 76rpx;
        width: 100%;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
      }
    }
  }

  .banner {
    width: 700rpx;
    height: 345rpx;

    .swiper {
      height: 100%;
    }

    .swiper-item {
      border-radius: 2rpx;

      .swiper-image {
        width: 100%;
        height: 100%;
      }
    }
  }

  .picBanner {
    margin-top: 30rpx;
  }

  .dailyRecommendScroll {
    width: 100%;
    white-space: nowrap;

    .picBanner {
      padding: 0 30rpx;
    }

    .picItem {
      width: 200rpx;
      height: 440rpx;
      border-radius: 8rpx;
      margin-right: 16rpx;
      overflow: hidden;
      .picItemImg {
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>
